<template>
  <div class="hello">
    <h1>我的第一个全局组件</h1>
    <p v-html="rawhtml"></p>
    <a v-bind:href="url">不要点我</a>
    <br>
    <a :href="url">不要点我!</a>
    <h3 :class="{'text-danger':result>0}">设置css的class</h3>
    <h3 :class="[{'text-danger':result<0},'myclass']">设置css的class</h3>
    <h3 :style="[{color:color},{border:'1px solid #ff0'}]">设置css的class</h3>
    <ul>
      <li>
        内容   {{  name}}
      </li>
      <li>{{ name.split('').reverse().join('')}}</li>
      <li>{{ result > 0 ? 'yes':'no'}}</li>
    </ul>

     
    <!-- <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul> -->
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      'name':'组件名称',
      'result':100,
      'rawhtml':'<h3 style="color:#f00"> hello</h3>',
      'url':'http://www.baidu.com',
      'color':'#00f'
    }
  }
  // props: {
  //   msg: String
  // }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
  li {
  display: inline-block;
  margin: 0 10px;
}
}

a {
  color: #42b983;
}
.text-danger {
  color: #f00;
}
.myclass{
  background: #42b983;
}
</style>
